﻿@using RuoVea.ExDto
@using RuoVea.OmiLogin
@using RuoVea.OmiLogin.Attributes
@using RuoVea.OmiLogin.Language
@using RuoVea.OmiLogin.Options
@{
    Layout = "";
    AppConfig config = ConfigManages.Config ?? new AppConfig();
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Html.Raw(i18n.user_login)</title>
    <link href="~/ruoveaui/xg6rvft8p/elementui/index.min.css" rel="stylesheet" />
    <link href="~/wwwroot/xg6rft8p/site/long.mini1.css" rel="stylesheet" asp-append-version="true" />
</head>
<body>
    <div id="main" v-cloak>
        @if (config.ShowI18n)
        {
            <div style="width:100%;">
                <div style="text-align:right; font-size: 12px;margin:15px 15px 0 0; ">
              <el-dropdown class="language-switcher" @@command="switchLanguage">
                        <span class="el-dropdown-link">
                            {{ currentLanguage }}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="zhCN">{{i18n.t("zhCNLang")}}</el-dropdown-item>
                            <el-dropdown-item command="en">{{i18n.t("enLang")}}</el-dropdown-item>
                            <el-dropdown-item command="zhTW">{{i18n.t("zhTWLang")}}</el-dropdown-item>
                            <el-dropdown-item command="fr">{{i18n.t("frLang")}}</el-dropdown-item>
                            <el-dropdown-item command="ja">{{i18n.t("jaLang")}}</el-dropdown-item>
                            <el-dropdown-item command="vi">{{i18n.t("viLang")}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
            </div>
        </div>
        }
        <div class="container"> 
              
            <div class="form-container">
                <h2>{{i18n.t('user_login')}}</h2>
                <el-form class="login-container" :rules="formRules" ref="formRef" :model="params" v-on:keydown.enter.native="doSubmit">
                    <el-form-item label="" prop="username">
                        <el-input type="text" v-model="params.username" :placeholder="i18n.t('account')" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input type="password" v-model="params.password" :placeholder="i18n.t('enter_password')" autocomplete="off"></el-input>
                    </el-form-item>
                    @if (ViewBag.CaptchaEnabled)
                    {
                        <el-form-item>
                            <el-col :span="14">
                                <el-form-item prop="code">
                                    <el-input type="text" :placeholder="i18n.t('please_enter_captcha')" v-model="params.code" style="width: 100%;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="10">
                                <img class="login-content-code-img" @@click="getCaptcha" width="130" height="38" :src="captchaImage" style="cursor: pointer" />
                            </el-col>
                        </el-form-item>
                    }
                    <el-form-item>
                        <el-button type="primary" style="width:100%;" v-on:click="doSubmit()">{{i18n.t('user_login')}}</el-button>
                    </el-form-item>
                </el-form>
                <el-row style="text-align: center;margin-top:10px">
                    @if (ViewBag.EnableForgotPassword)
                    {
                        <el-link type="primary"><a href="@(config.PrefixRoute+config.ForgotPasswordUrl)">{{i18n.t('forgot_password')}}</a></el-link>
                    }
                    @if (ViewBag.EnableRegister)
                    {
                        <el-link type="primary"><a href="@(config.PrefixRoute+config.RegisterUrl)">{{i18n.t('register')}}</a></el-link>
                    }
                </el-row>
            </div>
        </div>
    </div>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/index.i18n.js"></script>
    <script>
    Vue.prototype.i18n.messages.zhCN = { ...Vue.prototype.i18n.messages.zhCN, ...{ zhCNLang:"中文",enLang:"英文",zhTWLang:"繁体中文",frLang:"法语",jaLang:"日语",viLang:"越南文",user_login:"用户登陆",account:"请输入账号",enter_password:"请输入密码",please_enter_captcha:"请输入验证码",forgot_password:"忘记密码",register:"注册" } };
    Vue.prototype.i18n.messages.en = { ...Vue.prototype.i18n.messages.en, ...{"zhCNLang": "Chinese",   "enLang": "English",   "zhTWLang": "Traditional Chinese",   "frLang": "French",   "jaLang": "Japanese",   "viLang": "Vietnamese", "user_login": "User Login", "account": "Please enter your account", "enter_password": "Please enter your password", "please_enter_captcha": "Please enter the captcha", "forgot_password": "Forgot Password", "register": "Register" } };
    Vue.prototype.i18n.messages.fr = { ...Vue.prototype.i18n.messages.fr, ...{"zhCNLang": "Chinois simplifié","enLang": "Anglais",   "zhTWLang": "Chinois traditionnel",   "frLang": "Français",   "jaLang": "Japonais",   "viLang": "Vietnamien","user_login": "Connexion utilisateur", "account": "Veuillez entrer votre compte", "enter_password": "Veuillez entrer votre mot de passe", "please_enter_captcha": "Veuillez entrer le captcha", "forgot_password": "Mot de passe oublié", "register": "S'inscrire" } };
    Vue.prototype.i18n.messages.ja = { ...Vue.prototype.i18n.messages.ja, ...{"zhCNLang": "中国語（简体）",   "enLang": "英語",   "zhTWLang": "台湾語（繁体）",   "frLang": "フランス語",   "jaLang": "日本語",   "viLang": "ベトナム語","user_login": "ユーザーログイン", "account": "アカウントを入力してください", "enter_password": "パスワードを入力してください", "please_enter_captcha": "キャプチャを入力してください", "forgot_password": "パスワードを忘れました", "register": "登録" } };
    Vue.prototype.i18n.messages.vi = { ...Vue.prototype.i18n.messages.vi, ...{"zhCNLang": "Tiếng Trung giản thể",   "enLang": "Tiếng Anh",   "zhTWLang": "Tiếng Trung phồn thể",   "frLang": "Tiếng Pháp",   "jaLang": "Tiếng Nhật",   "viLang": "Tiếng Việt", "user_login": "Đăng nhập người dùng", "account": "Vui lòng nhập tài khoản của bạn", "enter_password": "Vui lòng nhập mật khẩu của bạn", "please_enter_captcha": "Vui lòng nhập mã captcha", "forgot_password": "Quên mật khẩu", "register": "Đăng ký" } };
    Vue.prototype.i18n.messages.zhTW = { ...Vue.prototype.i18n.messages.zhTW, ...{"zhCNLang":"简体中文","enLang":"英文","zhTWLang":"繁體中文","frLang":"法文","jaLang":"日文","viLang":"越南文","user_login":"使用者登入","account":"請輸入帳號","enter_password":"請輸入密碼","please_enter_captcha":"請輸入驗證碼","forgot_password":"忘記密碼","register":"註冊"} };
    </script>

    <script src="~/ruoveaui/xg6rvft8p/elementui/index.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhCN.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/en.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/fr.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/vi.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/elementui/lang/zhTW.js"></script>

    <script>Vue.prototype.$baseURL = "@config?.PrefixRoute";</script>
    <script src="~/ruoveaui/xg6rvft8p/vue/axios.min.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/vue/vue-i18n.min.js"></script>
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.js"></script> 
    <script src="~/ruoveaui/xg6rvft8p/avue/avue.min.option.js"></script>
    <script>
        new Vue({
            el: "#main",
            data() {
                return {
                    watermarkEnabled: `@(ViewBag.SysWatermark ?? false)`,
                    webWatermarkText: '@(ViewBag.SysWebWatermark)',
                    captchaEnabled: `@(ViewBag.CaptchaEnabled ?? false)`,
                    captchaImage: '',
                    params: {
                        username: '',
                        password: '',
                        code: '',
                        codeId: 0,
                    },
                    formRules: {
                        username: [{ required: true, message: this.i18n.t('account'), trigger: 'blur' }, { min: 2, max: 18, message: '@Html.Raw(i18n.length_between_3_to_18)', trigger: 'blur' }],
                        password: [{ required: true, message: this.i18n.t('enter_password'), trigger: 'blur' }, { min: 3, max: 18, message: '@Html.Raw(i18n.length_between_3_to_18)', trigger: 'blur' }]
                    },
                    currentLanguage: this.i18n.t(`${(Vue.prototype.$cookie.get('lang') || 'zhCN').replace(/"/g, '')}Lang`),
                }
            },
            created() {
                if(this.watermarkEnabled==true){
                    Vue.prototype.Storage.set("system:watermark",this.webWatermarkText);
                }else{
                    Vue.prototype.Storage.remove("system:watermark");
                    Vue.prototype.watermark({ text: '' })
                }
                if (this.captchaEnabled) {
                    this.getCaptcha();
                }
            },
            mounted: function () {
                const storedLang =Vue.prototype.$cookie.get('lang');
                if (storedLang) {
                    switch (storedLang) {
                        case 'en-US':
                        case 'en':
                            ELEMENT.locale(ELEMENT.lang.en);
                            Vue.prototype.i18n.currentLang = 'en';
                            break;
                        case 'zh-CN':
                        case 'zhCN':
                        case 'zh':
                            ELEMENT.locale(ELEMENT.lang.zhCN);
                            Vue.prototype.i18n.currentLang = 'zhCN';
                            break;
                        case 'zh-TW':
                        case 'zhTW':
                            ELEMENT.locale(ELEMENT.lang.zhTW);
                            Vue.prototype.i18n.currentLang = 'zhTW';
                            break;
                        case 'vi-VN':
                        case 'viVN':
                        case 'vi':
                            ELEMENT.locale(ELEMENT.lang.vi);
                            Vue.prototype.i18n.currentLang = 'vi';
                            break;
                        case 'fr-FR':
                        case 'fr':
                            ELEMENT.locale(ELEMENT.lang.fr);
                            Vue.prototype.i18n.currentLang = 'fr';
                            break;
                        case 'ja-JP':
                        case 'ja':
                            ELEMENT.locale(ELEMENT.lang.ja);
                            Vue.prototype.i18n.currentLang = 'ja';
                            break;
                    }
                } else {
                    ELEMENT.locale(ELEMENT.lang.zhCN);
                    Vue.prototype.i18n.currentLang = 'zhCN';
                }
            },
            methods: {
                switchLanguage(command) {
                    Vue.prototype.$cookie.set("lang",command ?? 'zhCN');

                    ELEMENT.locale(ELEMENT.lang[command]);
                    Vue.prototype.i18n.currentLang = command;
                    this.currentLanguage=this.i18n.t(`${command}Lang`); 
                    window.location.reload();
                },
                getCaptcha() {
                    this.params.code = '';
                    this.$http.get("/auth/GetCaptcha").then((res) => {
                        if (res) {
                            this.captchaImage = 'data:text/html;base64,' + res.img;
                            this.params.codeId = res.id
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                },
                gotoRegister() {
                    window.location.href = '/Register';
                },
                doSubmit() {
                    this.$refs["formRef"].validate((valid) => {
                        if (valid) {
                            let params = { account: this.params.username, password: this.params.password, code: this.params.code, codeId: this.params.codeId };
                            this.$http.post("/auth/login", params).then((res) => {
                                if (res==true)
                                    window.location.href = "@config.DefaultUrl";
                            }).catch(e => {
                                console.log(e);
                            });
                        }
                    });
                }
            },
            filters: {}
        });
    </script>
</body>
</html>
